<script setup>
import tabBar from "../../pages/comment/tabBar.vue"
const applicationRecords=[
  {
    name:"张三",
    id:"123456789",
    time:"2025-9-12-15:00:00",
    major:"软件工程",
    status:"已返校注册",
  },
  {
    name:"李四",
    id:"2415645693",
    time:"2025-9-12-10:00:00",
    major:"生物工程",
    status:"已返校注册",
  }
];
</script>

<template>
  <view>

    <tabBar :cur-index="3"></tabBar>
  </view>
  <view class="main">
    <!--    已经返校注册学生列表-->
    <view class="record-list">
      <!--  循环遍历applicationRecords-->
      <view class="record-item" v-for="(item,index) in applicationRecords" :key="index">
        <!--    姓名 学号-->
        <view class="item-header">
          <text claass="item-name">{{item.name}}</text>
          <text claass="item-id">{{item.id}}</text>
        </view>
        <!--    返校时间-->
        <view class="item-apply-time">返校时间：{{item.time}}</view>
        <!--    专业-->
        <view class="item-major">{{item.major}}</view>
        <view class="item-footer">
          <view class="item-avatar">头像</view>
          <text class="item-status">{{item.status}}</text>

        </view>
      </view>
    </view>
    <tabBar :cur-index="3"></tabBar>
  </view>

</template>

<style >
.main{
  height: 100%;
  width: 100%;
  background-color:rgba(239, 239, 244, 1);
}

.record-list{
  margin: 0 0px;
}

.record-item {

  height: 170px;
  background-color: white;
  padding: 15px;
  margin: 10px;

}
.item-header {
  display: flex;
  justify-content: space-between;
  margin: 8px;
}
.item-name{
  font-weight: bold;
  font-size: 16px;
}
.item-id {
  color: #999;
  font-size: 14px;
}
.item-apply-time{
  color: orange;
  font-size: 14px;
  margin: 8px;
}
.item-major{
  margin: 8px;
  color: #999;
  font-size: 14px;
}
.item-footer {
  display: flex;
  align-items: center;
}
.item-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 50%; /* 圆形头像 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 12px;
}

</style>